<template>
	<view class="login_container">
		<view class="login_box">
			<view class="avatar_box">
				<image :src="require('../../static/logo.jpg')" class="img">
			</view>
			<view class="login_form">
				<h1 class="biaoti">鲸意</h1>
				<view class="zhanghao_input">
					<uni-icons class="yonghu" type="person-filled" size="23" color="#bebebe"></uni-icons>
					<input style="font-size: 28rpx" class="zhanghao" v-model="loginform.zhanghao" @blur="isdisabled" type="text" placeholder="请输入账号" />
				</view>
				<view class="mima_input">
					<uni-icons class="yonghu" type="locked" size="23" color="#bebebe"></uni-icons>
					<input style="font-size: 28rpx" class="mima" v-model="loginform.mima" @blur="isdisabled" type="password" placeholder="请输入密码" />
				</view>
					<button :class="{ denglu: loginform.islogin, weidenglu: loginform.nologin }" v-bind:disabled="loginform.isable" @click="judgeLogin" >登录</button>
				<navigator url="./zhuce" class="zhuce_tiaozhuan">
					<button class="zhuce">注册</button>
				</navigator>
				<navigator url="./wangjimima" class="wangjimima_tiaozhuan">
					<text class="wangjimima" replace>忘记密码</text>
				</navigator>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginform: {
					islogin: false,
					nologin: true,
					isable: true,
					zhanghao: "",
					mima: "",
				},
			};
		},
		methods: {
			//判断登录
			judgeLogin() {
				uni.request({
					url: this.baseurl + '/login',
					method: "POST",
					header: {
						'content-type': "application/x-www-form-urlencoded",
					},
					data: {
						userId: this.loginform.zhanghao,
						password: this.loginform.mima,
					},
					success: (res) => {
						var data = res.data
						if (data.code === 200) {
							getApp().globalData.userId = this.loginform.zhanghao
							//code = 200 成功
							uni.showToast({
								title: "登录成功",
								icon: 'none',
								duration: 2000,
							});
							setTimeout(() => {
								uni.navigateTo({
									url:'./xingquxuanze1'
								});
							}, 1000);
						}
						if (data.code === 212 || data.code === 214) {
							//code = 212 账号不存在
							//code = 214 密码错误
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 2000,
							});
						}
					}
				})
			},
			back()
			{
				uni.navigateBack({
					url:'./login'
				})
			},
			isdisabled() {
				var a1 = this.loginform.zhanghao;
				var a2 = this.loginform.mima;
				if (a1 !== "" && a2 !== "") {
					this.loginform.isable = false;
					this.loginform.islogin = true;
					this.loginform.nologin = false;
				} else {
					this.loginform.isable = true;
					this.loginform.islogin = false;
					this.loginform.nologin = true;
				}
				if (a2 !== "" && a1 === "") {
					alert("请优先输入账号！");
					this.loginform.mima = "";
					this.loginform.zhanghao = "";
				}
			}
		}
	}
</script>

<style scoped>
	.login_container {
		background-color: #c0e9ff;
		height: 100vh;
		width: 100vw;
	}

	.login_box {
		width: 80vw;
		height: 60vh;
		background-color: #ffffff;
		border-radius: 10%;
		position: relative;
		left: 10vw;
		top: 30vh;
	}

	.avatar_box {
		height: 300rpx;
		width: 300rpx;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 5%;
		box-shadow: 0 0 10px rgb(12, 166, 255);
		position: relative;
		left: 19vw;
		top: -350rpx;
	}
	
	.img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		position: relative;
		left: -2rpx;
		top:-2rpx;
	}

	.login_form {
		width: 100vw;
		height: 100%;
		position: relative;
		width: 100%;
		top: -21vh;
		padding: 0% 10%;
		box-sizing: border-box;
	}

	.biaoti {
		size: 50rpx;
		position: relative;
		left: 37%;
		color: #4abbfc;
		top: 7vh;
	}
	.zhanghao_input
	{
		height: 4.5vh;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		top: 14vh;
	}
	.yonghu
	{
		position: relative;
		left:15rpx;
		top:9rpx;
	}
	.zhanghao {
		height: 4vh;
		width: 60vw;
		border: 0px solid #eee;
		border-radius: 10rpx;
		position: relative;
		left:72rpx;
		top:-50rpx;
	}
	.mima_input
	{
		height: 4.5vh;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		top: 15vh;
	}
	.mima {
		height: 4vh;
		width: 53vw;
		border: 0px solid #eee;
		border-radius: 10rpx;
		position: relative;
		left:72rpx;
		top:-50rpx;
	}
	.weidenglu 
	{
		width: 50vw;
		height: 5vh;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #bebebe;
		border-radius: 50rpx;
		position: relative;
		top:25vh;
	}
	.denglu {
		width: 50vw;
		height: 5vh;
		font-size: 22px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		background-color: #20b0ff;
		position: relative;
		top:25vh;
	}
	.zhuce_tiaozhuan	
	{
		width: 50vw;
		height: 5vh;
		position: relative;
		left: 7vw;
		top: 26vh;
	}
	.zhuce {
		width: 50vw;
		height: 5vh;
		color: black;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;	
		border: 2rpx solid #bebebe;
		background-color: white;
		position: relative;
	}
	.wangjimima_tiaozhuan
	{
		position: relative;
		left: 24vw;
		top: 32vh;
	}
	.wangjimima {
		font-size: 18px;
		color: blue;
		position: relative;
		left:-15rpx;
	}
</style>
